<template>
  <div>
    <!-- <h1>View's Life Cycle</h1> -->
    <h1>Is my necessary fruits!</h1>
    <p v-if="loading">loading...</p>
    <ul v-if="!loading">
      <li v-for="(item, index) in fruitsList" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  /* beforeCreate() {
    console.log("beforeCreate");
  },
  mounted() {
    console.log("mounted");
  },
  created() {
    console.log("created");
  }, */
  data() {
    return {
      fruitsList: [],
      loading: true,
    };
  },
  created() {
    // console.log("this is created functions");
    this.getData();
  },
  methods: {
    getData() {
      setTimeout(() => {
        this.fruitsList = ["Banana", "Apple", "Pear"];
        this.loading = false;
      }, 2000);
    },
  },
};
</script>

<style>
li {
  list-style: none;
}
</style>
